<template>
  <div class="table-grid-div">
    <table class="table-grid-table" cellspacing="8">
      <tr v-for="index in num" :key="index">
        <td
            class="table-grid-item-td"
            v-for="index1 in 5"
            :key="index1"
            :ref="((index-1)*5+index1).toString()"
            @click="clickTd($event)"
            :style="'background:'+(((index-1)*5+index1>total)?'white':'red')"
        >
          {{((index-1)*5+index1>total)?'':(index-1)*5+index1}}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import {postRequest} from "@/axio2";

export default {
  name: "TableGridComponent",
  data(){
    return{
      num: 1,
      dataIndex:[],
      total:0
    }
  },
  props:{
    requestUrl:String,
    requestParam:Object
  },
  methods:{
    successCallback(resp, component){
      let data = resp.data.resultData;
      this.dataIndex = data;
      let recordNum = data.length;
      this.total = recordNum;
      let left = 0;
      let total = 0;
      if(recordNum%5===0){
        this.num = recordNum/5;
      }else{
        this.num = Math.floor(recordNum/5) + 1;
        total = (Math.floor(recordNum/5) + 1) * 5;
        left = total - recordNum;
      }

    },
    clickTd(event){
      let event1 = event.currentTarget;
      let event2 = event.target;
      if(event1===event2){
        if(""===event.target.innerText||undefined===event.target.innerText){
          return;
        }
        this.$parent.$emit("selectTableGrid",event.target.innerText-1,this.dataIndex[event.target.innerText-1]);
      }
    },
    getLastIndexData(currentIndex){
      if(currentIndex-1>=0){
        this.$parent.$emit("selectTableGrid",currentIndex-1,this.dataIndex[currentIndex-1]);
      }
    },
    getNextIndexData(currentIndex){
      if(currentIndex+1<this.dataIndex.length){
        this.$parent.$emit("selectTableGrid",currentIndex+1,this.dataIndex[currentIndex+1]);
      }
    }
  },
  mounted(){
    if(undefined!==this.requestUrl){
      // 按requestUrl请求后台获取
      postRequest(
          this.requestUrl,
          this.requestParam,
          this.successCallback,
          null,
          this
      )
    }
  }
}
</script>

<style scoped>
.table-grid-div{
  padding-top: 10px;
  padding-bottom: 10px;
  width: 270px;
  max-height: 270px;
  position: fixed;
  right: 0;
  bottom: 60%;
  background: white;
  border: 1px black solid;
  border-radius: 5px;
  overflow-y: auto;
}
.table-grid-table{
  margin: auto;
}
.table-grid-item-td{
  cursor:pointer;
  padding: 4px;
  margin: 10px;
  border-radius: 5px;
  color: white;
  text-align: center;
}
.table-grid-item-td:hover{
  background: blue;
}
</style>